<html>
	<head>
		<title>Iceland</title>

		<!-- Latest compiled and minified CSS -->​
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">​

		<!-- jQuery library -->​
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>​

		<!-- Popper JS -->​
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>​

		<!-- Latest compiled JavaScript -->​
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

		<link rel="stylesheet" type = "text/css" href="styles/style.css">

		<link rel="icon" href ="images/favicon.png" type="image/png">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Travel site about Iceland">
		<meta name="keywords" content="travel, Iceland, northern lights, lagoon, geyser">
		<meta name="author" content="Ulrika Höök">
	</head>

	<body>

		<!--Header with navbar-->
		<header class="nav-container">
			<div class="logo">
				<a href="index.html">ICELAND</a>
				<button id="menu-toggle">
					<img src="images/menu.png" id ="menu-img"/>
				</button>
			</div>
			<nav class="nav-bar">
				<a class = "text-button" href="nature.html">NATURE</a>
				<a class = "text-button" href="history.html">HISTORY</a>
				<a class = "text-button" href="culture.html">CULTURE</a>
				<a class = "text-button" href="places.html">PLACES TO VISIT</a>
				<a class = "text-button" href="travelplan.html">TRAVEL PLAN</a>
			</nav>
		</header>
		
		<!--Intro picture and text-->
		<section class="intro-container">
			<img class="intro-img" src="images/northern lights small.jpg" alt="northern lights" title="Northern Lights by Joshua Earle" />
			<h1 class="intro-header">THE COOLEST PLACE ON EARTH</h1>
			<div class="intro-text">
				<h3>Are you curious about the country of fire and ice?</h3>
				<p>You have come to the right place!<br/> Learn about the nature of Iceland - its volcanos, geysers and lagoons.<br/> Learn about the Icelandic people and their culture and food.<br/> Learn about what you cannot miss when traveling to Iceland.</p>	
			</div>
		</section>

		<!--Photogallery-->
		<section>
			<div class="content-header">
				<p>Photogallery</p>
			</div>
			<div class="gallery">
				<a href="images/waterfall.jpg" target="_blank" title="River by Serey Morm">
					<img src="images/waterfall.jpg" class ="gallery-img"/>
				</a>
				<a href="images/lagoon.jpg" target="_blank" title="Lagoon by Jeff Sheldon">
					<img src="images/lagoon.jpg" class ="gallery-img"/>
				</a>
				<a href="images/tower.jpg" target="_blank" title="Tower by Ferdinand Stöhr">
					<img src="images/tower.jpg" class ="gallery-img"/>
				</a>
				<a href="images/geyser.jpg" target="_blank" title="Geyser by Valdemaras D.">
					<img src="images/geyser.jpg" class ="gallery-img"/>
				</a>
				<a href="images/ocean.jpg" target="_blank" title="Ocean by Shadman Sakib">
					<img src="images/ocean.jpg" class ="gallery-img"/>
				</a>
				<a href="images/volcano.jpg" target="_blank" title="Volcano by Koushik Chowdavarapu">
					<img src="images/volcano.jpg" class ="gallery-img"/>
				</a>
			</div>
		</section>
		
		<!--Footer with cred to photo and icon providers-->
		<footer>					
			<div class="attribution-section">
				Menu icon made by 
				<a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect" target="_blank">Pixel perfect</a>
				 from 
				<a href="https://www.flaticon.com/" title="Flaticon" target="_blank">www.flaticon.com</a>
			</div>
			<div class="attribution-section">
				Favicon and other icons by 
				<a href="https://www.icons8.com/" title="Icons8" target="_blank">www.icons8.com</a>
			</div>
			<div class="attribution-section">
				Photos from 
				<a href="https://www.unsplash.com/" title="Unsplash" target="_blank">www.unsplash.com</a>
			</div>
		</footer>
		
		<script src="script/jquery.js"></script>
		<script src="script/main.js"></script>
	</body>
</html>